<template>
  <div class="TheNav">
    <h1>自助报表</h1>
    <div>
      <button @click="undo">撤销</button>
      <button @click="redo">重做</button>
      <button @click="addWidget">添加组件</button>
    </div>
  </div>
</template>
<script>
const initWidget = () => {
  return {
    dimension: {
      top: 0,
      left: 0,
      width: 320,
      height: 300,
    },
    title: "未命名",
    type: "TheLineChart",
    configType: "TheChartConfig",
    chartOption: {
      grid: {
        show: true,
        top: 20,
        bottom: 20,
        left: 20,
        right: 20,
        backgroundColor: "rgba(0, 0, 0, 0)",
        containLabel: true,
      },
      xAxis: {
        show: true,
        name: "",
        position: "bottom",
        nameLocation: "center",
      },
    },
  }
}
export default {
  name: "TheNav",
  data() {
    return {
      id: 1,
    }
  },
  computed: {
    widgetId() {
      return this.$store.state.widgetId
    },
  },
  methods: {
    addWidget() {
      console.log("添加组件")
      this.$store.dispatch("AddWidget", initWidget())
    },
    undo: function() {
      if (window.H.slideIndex > 0) {
        window.H.slideIndex -= 1
        window.H.hook.$emit("vuex:replace", window.H.slideIndex)
      }
    },
    redo: function() {
      if (window.H.slideIndex < window.H.slideHistory.length - 1) {
        window.H.slideIndex += 1
        window.H.hook.$emit("vuex:replace", window.H.slideIndex)
      }
    },
  },
}
</script>
<style lang="scss">
.TheNav {
  align-items: center;
  background: #fff;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.3);
  justify-content: space-between;
  padding: 0 24px 0 19px;
  h1 {
    color: #2c3e50;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
  }
}
</style>
